<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理页面</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script  src="js/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">

    <el-card class="filter-container" shadow="never">
        <div>
            <el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索</el-button>
        </div>
        <div style="margin-top: 15px">
            <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                <span>根据用户名进行模糊查询</span>
                <el-form-item label="输入搜索：">
                    <el-input v-model="listQuery.username" class="input-width" placeholder="用户名称" clearable></el-input>
                </el-form-item>
            </el-form>
        </div>
    </el-card>

    <!-- 添加用户 -->
    <el-card class="operate-container" shadow="never">
        <el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加用户</el-button>
    </el-card>


    <el-table ref="roleTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
        <el-table-column label="编号" width="100" align="center">
            <template slot-scope="scope">{{scope.row.uid}}</template>
        </el-table-column>
        <el-table-column label="用户名称" align="center">
            <template slot-scope="scope">{{scope.row.username}}</template>
        </el-table-column>
        <el-table-column label="用户密码" align="center">
            <template slot-scope="scope">{{scope.row.password}}</template>
        </el-table-column>
        <el-table-column label="电话" align="center">
            <template slot-scope="scope">{{scope.row.phone}}</template>
        </el-table-column>
        <el-table-column label="添加时间" width="180" align="center">
            <template slot-scope="scope">{{scope.row.createtime | formatDateTime}}</template>
        </el-table-column>


        <el-table-column label="操作" width="160" align="center">
            <template slot-scope="scope">
                <el-row>
                    <el-button size="mini" type="text" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
                </el-row>
            </template>
        </el-table-column>
    </el-table>



    <!-- 添加&修改 角色对话框 -->
    <el-dialog :title="isEdit?'编辑用户':'添加用户'" :visible.sync="dialogVisible" width="40%">
        <el-form :model="user" label-width="150px" size="small">
            <el-form-item label="用户名称：">
                <el-input v-model="user.username" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="用户密码：">
                <el-input v-model="user.password" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="电话：">
                <el-input v-model="user.phone"  style="width: 250px"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSave()" size="small">确 定</el-button>
      </span>
    </el-dialog>





</div>

<script>
    new Vue({
        el: '#app',
        data: function() {
            const defaultUser = {
                uid: null,
                username: null,
                password: null,
                phone: null,
                createtime: null
            };
            return {
                listQuery: { username: "" },
                list: null,
                listLoading: false,
                dialogVisible: false,
                user: Object.assign({}, defaultUser),
                isEdit: false
            }
        },
        created() {
            //获取用户列表
            this.loadUsers();
        },
        methods: {
            loadUsers(){
                return axios
                    .post("/findAllUsers",this.listQuery)
                    .then(resp => {
                        console.log("请求成功",resp);
                        this.list =resp.data.content;
                        this.listLoading = false;
                    }).catch(error => {
                    this.$message.error("数据获取失败! ! !");
                });

            },
            handleSearchList(){
                this.loadUsers();
            },
            handleAdd(){
                this.dialogVisible = true; //打开对话框
                this.isEdit = false; //false 修改操作
                this.user = Object.assign({}, defaultUser);
            },
            handleUpdate(row) {
                this.dialogVisible = true;
                this.isEdit = true;
                //回显数据
                this.user = Object.assign({}, row);
            },
            //添加&修改用户
            handleSave() {
                axios
                    .post("/register", this.user)
                    .then(res => {
                        this.dialogVisible = false;
                        this.loadUsers();
                    })
                    .catch(error => {
                    });
            },
            handleDelete(row) {
                this.$confirm("是否要删除该用户?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    axios("/deleteUser?id=" + row.uid)
                        .then(res => {
                            this.loadUsers();
                        })
                        .catch(err => {

                        });
                });

            },



        }

    })
</script>

</body>





</html>